<template>
    <div class="page">
        <div class="search-box">
            <el-icon color="#999" size="18px">
                <Search />
            </el-icon>
            <input v-model="keyword" type="text" placeholder="请输入" />
            <div class="search-btn" @click="onSearch">搜索</div>
        </div>

        <!-- tabs -->
        <div class="tabs">
            <div
                class="tab-item"
                :class="{
                    active: index == tabActive,
                }"
                v-for="(item, index) in tabs"
                :key="item.value"
                @click="onTabClick(index)"
            >
                {{ item.label }}
            </div>
        </div>

        <!-- 查询结果显示内容 -->
        <div
            class="result-box"
            v-loading="isLoading"
            element-loading-background="transparent"
        >
            <template v-if="!isLoading">
                <template v-if="tabs[tabActive].data.length">
                    <!-- 案例 -->
                    <div
                        class="case-group"
                        v-if="tabs[tabActive].value == 'Case'"
                    >
                        <CaseItemP
                            v-for="item in getData(tabs[tabActive].data)"
                            :item="item"
                            :key="item.id"
                        />
                    </div>

                    <!-- 模板库 -->
                    <TemplateGroupP
                        :list="getData(tabs[tabActive].data)"
                        v-if="tabs[tabActive].value == 'Template'"
                    />

                    <WorksGroupP
                        gap="48"
                        :list="getData(tabs[tabActive].data)"
                        v-if="tabs[tabActive].value == 'Works'"
                    />

                    <NewsGroupP
                        :list="getData(tabs[tabActive].data)"
                        v-if="tabs[tabActive].value == 'News'"
                    />

                    <!-- 分页 -->
                    <div class="pagination">
                        <el-pagination
                            background
                            layout="prev, pager, next, jumper"
                            :total="tabs[tabActive].data.length"
                            :page-size="pagination.size"
                            :current-page="pagination.page"
                            prev-text="上一页"
                            next-text="下一页"
                            @current-change="pageChangeHandle"
                            :hide-on-single-page="true"
                        />
                    </div>
                </template>
                <el-empty
                    :image-size="150"
                    description="无数据，换个词搜搜"
                    v-else
            /></template>
        </div>
    </div>
    <LazyLayoutFooterP />
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { useContent } from ".";

const {
    keyword,
    isLoading,
    tabActive,
    tabs,
    pagination,
    onSearch,
    onTabClick,
    getList,
    getData,
    pageChangeHandle,
} = useContent();

await getList();
</script>
<style lang="scss" scoped>
.page {
    position: relative;
    min-height: 100vh;
    background-color: #edf5fa;
    padding: 52px 0;
}

.search-box {
    width: 800px;
    height: 50px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.21);
    border-radius: 12px;
    overflow: hidden;

    display: flex;
    align-items: center;
    padding: 0 0 0 15px;

    input {
        width: 100%;
        height: 30px;
        padding: 0 15px;
        border: none;
        font-size: 16px;

        &:focus {
            outline: none;
            border: none;
        }
    }

    .search-btn {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 97px;
        height: 46px;
        background: #5085fb;
        border-radius: 12px;
        margin-right: 2px;
        font-size: 18px;
        color: #ffffff;
        line-height: 30px;
        cursor: pointer;
        user-select: none;
    }
}

.tabs {
    display: flex;
    width: 1200px;
    margin: 68px auto 0;
    border-bottom: 1px solid #e6e8eb;

    .tab-item {
        font-size: 14px;
        color: #333333;
        line-height: 30px;
        padding: 12px 0;
        margin-right: 45px;
        cursor: pointer;

        &.active {
            color: #1982f5;
            position: relative;

            &::after {
                content: "";
                position: absolute;
                width: 24px;
                height: 2px;
                left: 50%;
                bottom: 0px;
                background: #1982f5;
                border-radius: 1px;
                transform: translateX(-50%);
            }
        }
    }
}

.result-box {
    width: 1200px;
    min-height: 200px;
    margin: 24px auto 0;

    .case-group {
        display: flex;
        flex-wrap: wrap;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    user-select: none;

    :deep(.el-pager) {
        li {
            width: 32px;
            height: 30px;
            border-radius: 6px;
            background-color: #fff;
            font-size: 16px;
            font-weight: 500;
        }
    }

    :deep(.el-pagination) {
        &.is-background {
            .btn-next,
            .btn-prev {
                background-color: #fff;
                padding: 0 10px;
                border-radius: 6px;
            }
        }
    }
}
</style>
